<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>段位管理</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
</head>

<body>
<% include("../layout/loading.html"){} %>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

                <table class="layui-table" id="TABLE" lay-filter="userTable"></table>
            </div>
        </div>
    </div>
    <style>
        .js-modify{padding:.2em .5em;border-radius:.2em;border:1px solid #666;cursor:pointer;}
    </style>
    <!-- js部分 -->
    <script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>
    <script>
        layui.use(["layer", "form", "table", "util",'admin', "upload"], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var util = layui.util;

            // 表格内的输入框
            var modifyText = (d,kv,k) => ["<span data-id='",d.id,"' data-k='",k,"' data-kv='",kv,"' data-v='",kv,"' class='js-modify' style='display:inline-block;width:70px;height:28px' data-code='",d.code,"' data-message='"+d.message+"'>",kv,"</span>"].join("")

            var cols = [
                // {title:"编号",field:"id",width:50},
                {field: 'rankName', title: '段位名称'},
                {title:"所需累计金豆",templet: d => modifyText(d,d.peaseNum,"peaseNum") }
            ];
            // 居中
            cols.forEach( i => i.align="center");
            // 渲染表格
            var insTb = table.render({
                elem: '#TABLE',
                cellMinWidth: 100,
                url: '/admin/rankLevel/list',
                page: true,
                cols: [ cols ]
            });
            // 统一Post请求
            function doPost(url,data,args){
                top.layer.load(2);
                console.log(data);
                $.post(url, data , function (res){
                    top.layer.closeAll();
                    let isOk = [0,200].includes(res.code);
                    if(res.msg)top.layer.msg(res.msg, {icon: isOk ? 1 :2});
                    if(isOk){
                        insTb.reload();//刷列表
                        if(typeof args == "function")args(res);//回调
                    }
                }, 'json');
            }

            //点击后弹出修改框
            $(document.body).on("click",".js-modify",function(e){
                let d = $(e.target).data();
                top.layer.prompt({title:"请输入",formType:3,value:d.kv},function(v,i){
                    if(!Number.isInteger(Number(v))||v<1) return top.layer.msg("请输入正整数", {icon: 2});
                    d.flag = "edit" ;
                    console.log(d);
                    if(d.k=="message"){
                        let s = splitMsg(d);
                        s[1] = v;
                        v = s.join("");
                    }
                    d[d.k] = v;
                    doPost("/admin/rankLevel/crud",d);
                });
            });

        });
    </script>
</body>
</html>